<template>
    <div :class="{'card':true,'selectCard':info.checked}" :info="info" @click="choose">
        <div :class="{'left':true,'leftSelected':info.checked}">
            <el-image :src="info.positionIcon" class="iconLeft" v-show="!info.checked"></el-image>
            <el-image :src="info.activeIcon" :class="{'iconLeft':true,'iconLeftSelect':info.checked}" v-show="info.checked"></el-image>
            <div :class="{'type':true,'selectedType':info.checked}" >{{info.iconText}}</div>
        </div>
        <div class="line"></div>
        <div class="insertTitle">{{info.positionName}}</div>
        <div class="insertContent">{{info.positionDescription}}</div>
    </div>
</template>

<script>
    import dentalIcon from '../assets/Relevant/pos_custom0.png'
    import dentalCheckIcon from '../assets/Relevant/pos_checked0.png'
    export default {
        name: "DentalItem",
        props:{
            info:{
                type:Object,
                default:function () {
                    return{
                        checked:false,
                        type:'DEANTAL BILLING'
                    }
                }
            }
        },
        data(){
            return{
                icon:dentalIcon,
                iconChecked:dentalCheckIcon
            }
        },
        created() {
            console.log('传过来的数据',this.info)
        },
        methods:{
            choose(){
                this.$emit('handleSelect',this.info)
            }
        }
    }
</script>

<style scoped>
    .card{
        cursor:pointer;
        width: 100%;
        height: 150px;
        background:white;
        border: 2px solid #eaebeb;
        border-radius: 10px;
        vertical-align: middle;
        display: flex;
        margin-top:20px;
        box-sizing: border-box;
    }
    .left{
        text-align: center;
        margin-left: 60px;
    }
    .leftSelected{
        margin-left: 58px!important;
    }
    .type{
        width: 120px;
        font-size: 14px;
        font-weight: bold;
    }
    .line{
        width: 4px;
        height: 90px;
        background: #e7e7e7;
        margin: auto 0;
        margin-left: 60px
    }
    .iconLeft{
        width:60px;
        height:60px;
        margin-top: 38px;
    }
    .iconLeftSelect{
        margin-top: 36px!important;
    }
    .insertTitle{
        margin: auto 10px;
        font-size:30px;
        font-weight:bold;
        margin-left: 50px
    }
    .insertContent{
        margin: auto 0px;
        font-size:16px;
        padding-top: 10px;
    }
    .selectedType{
        color: #2dc3e3!important;
    }
    .selectCard{
        border: 4px solid #2dc3e3;
    }
    @media screen and (max-width: 1440px) {
        .card{
            height: 100px;
        }
        .iconLeft{
            width:40px;
            height:40px;
            margin-top: 20px;
        }
        .iconLeftSelect{
            margin-top: 18px!important;
        }
        .line {
            width: 3px;
            height: 60px;
        }
        .left{
            margin-left: 40px;
        }
        .leftSelected{
            margin-left: 38px!important;
        }
    }
    @media screen and (max-width: 1200px) {
        .card{
            height: 80px;
        }
        .iconLeft{
            width:35px;
           height: 35px;
            margin-top: 10px;
        }
        .iconLeftSelect{
            margin-top: 8px!important;
        }
        .left{
            margin-left: 20px;
        }
        .leftSelected{
            margin-left: 18px!important;
        }
        .line{
            height: 50px;
            width: 2px;
            margin-left: 20px
        }
        .insertTitle{
            font-size:22px;
            margin-left: 30px
        }
        .insertContent{
            font-size:12px;
            padding-top: 7px;
            margin: auto 0;
        }
        .type{
            font-size: 12px;
        }
    }
</style>